<template>
  <el-col :span="10">
    <el-card shadow="always" style="height:400px;border-radius: 20px;margin: 40px">
      <el-button color="#626aef" style="float: right" @click="dialogFormVisible = true">修改用户信息</el-button>
      <el-descriptions title="User Info">
        <el-descriptions-item label="昵称">{{ personalInfo.nickname }}</el-descriptions-item>
        <el-descriptions-item label="用户名">{{ personalInfo.username }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </el-col>
  <el-dialog v-model="dialogFormVisible" title="修改用户信息">
    <el-form :model="form">
      <el-form-item label="昵称" :label-width="formLabelWidth">
        <el-input v-model="form.nickname" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth">
        <el-input v-model="form.password" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false;updateUser(form.nickname,form.password)">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import {ref, onMounted, reactive} from "vue";
import {updatePerInfo} from "@/apis/user";
import {getPersonalInfo} from "@/apis/user";
import {ElMessage} from "element-plus";

const personalInfo = ref({})
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form = reactive({
  nickname: '',
  password: ''
})

const getPersonal = async () => {
  await getPersonalInfo().then(res => {
    if (res.code == 200){
      personalInfo.value = res.data
    }else {
      ElMessage({type:'warn',message:res.message})
    }
  })
}
const updateUser = async (nickname, password) => {
  await updatePerInfo(nickname, password).then(
      res => {
        ElMessage({type:'success',message:res.message})
        getPersonal()
      }
  )
}

onMounted(() => {
  getPersonal()
})


</script>